<toaster-container></toaster-container>
<div class="row">
  <select [(ngModel)]="selectedType" (change)="getEvents()" class="form-control col-md-3">
    <option [ngValue]="undefined">Any Type</option>
    <option *ngFor="let type of types | enumToArray" [ngValue]="type">{{type}}</option>
  </select>
  <div class="col-md-3">
    <button class="btn btn-transparent" [routerLink]="[false, 'new']">
      Add Event
    </button>
  </div>
  <div class="col-md-6" style="text-align:right">
      <button class="btn btn-primary-dark" [disabled]="selectedEvents.length == 0" (click)="deleteEvents()">
        Delete Events
        <span *ngIf="selectedEvents.length > 0">({{selectedEvents.length}})</span>
      </button>
      <button class="btn btn-primary-dark ml-1" [disabled]="selectedEvents.length == 0" (click)="publishEvents()">
        Publish Events
        <span *ngIf="selectedEvents.length > 0">({{selectedEvents.length}})</span>
      </button>
  </div>
</div>
<hr>

<sustainalytics-table #eventsTable [columns]="columns" [source]="events" [filter]="filter" [elementCount]="count" [paginationPositionDisplay]="paginationPosition"
  [displayTitle]="false" (changed)="tableOptionsChanged($event)" (buttonClicked)="onEventSelectionChanged($event)">
</sustainalytics-table>